<template>
  <div>
    <h1>【aty-captcha-string】 component demo</h1>
    <p>【aty-captcha-string】 本质，字符型验证</p>
    <aty-row class="v-captcha-wrapper">
      <aty-title level="4">1、【aty-captcha-string】 基础，自带输入框</aty-title>
      <aty-title level="5">点击图片切换、鼠标blur自动验证</aty-title>
      <aty-row>
        <aty-col span="12">
          <aty-captcha-string @click="handleCapchaClick" @on-success="handleSuccess" />
        </aty-col>
      </aty-row>
    </aty-row>
    <aty-row class="v-captcha-wrapper">
      <aty-title level="4">2、【aty-captcha-string】 无输入框</aty-title>
      <aty-title level="5">自定义输入框逻辑</aty-title>
      <aty-row>
        <aty-col span="4">
          <aty-captcha-string ref="captchaString"
                              :withInput="false" />
        </aty-col>
        <aty-col span="8">
          <aty-input v-model="value" />
        </aty-col>
        <aty-col span="4" style="padding-left: 15px">
          <aty-button type="primary" text="手动验证" shape="circle" size="large"
                      @click="handleVerify" />
        </aty-col>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>

export default {
  components: {},
  data () {
    return {
      value: ''
    }
  },
  methods: {
    handleSuccess () {
      Artery.notice.success({
        title: '验证成功！',
        desc: ''
      })
    },
    handleCapchaClick () {
      console.log('切换验证码')
    },
    handleVerify () {
      if (!this.value) {
        Artery.notice.warning({
          title: '验证不能为空',
          desc: ''
        })
      }
      this.$refs.captchaString.validate(this.value).then(() => {
        Artery.notice.success({
          title: '验证成功！',
          desc: `验证码：${this.value}`
        })
      }).catch(() => {
        this.value = ''
        this.$refs.captchaString.requestCaptcha()
        Artery.notice.error({
          title: '验证失败',
          desc: '',
          duration: 3000
        })
      })
    }
  }
}
</script>
<style lang="less" type="text/less" scoped>
    .v-captcha-wrapper {
        text-align: left;
        padding: 20px;
    }

</style>
